"use strict";

exports.__esModule = true;
exports.default = void 0;

var _utils = require("../utils");

var _bindEvent = require("../mixins/bind-event");

var _scroll = require("../utils/dom/scroll");

var _createNamespace = (0, _utils.createNamespace)('sticky'),
    createComponent = _createNamespace[0],
    bem = _createNamespace[1];

var _default = createComponent({
    mixins: [(0, _bindEvent.BindEventMixin)(function (bind) {
        if (!this.scroller) {
            this.scroller = (0, _scroll.getScroller)(this.$el);
        }

        bind(this.scroller, 'scroll', this.onScroll, true);
        this.onScroll();
    })],
    props: {
        zIndex: Number,
        container: null,
        offsetTop: {
            type: Number,
            default: 0
        }
    },
    data: function data() {
        return {
            fixed: false,
            height: 0,
            transform: 0
        };
    },
    computed: {
        style: function style() {
            if (!this.fixed) {
                return;
            }

            var style = {};

            if ((0, _utils.isDef)(this.zIndex)) {
                style.zIndex = this.zIndex;
            }

            if (this.offsetTop && this.fixed) {
                style.top = this.offsetTop + "px";
            }

            if (this.transform) {
                style.transform = "translate3d(0, " + this.transform + "px, 0)";
            }

            return style;
        }
    },
    methods: {
        onScroll: function onScroll() {
            var _this = this;

            this.height = this.$el.offsetHeight;
            var container = this.container,
                offsetTop = this.offsetTop;
            var scrollTop = (0, _scroll.getScrollTop)(window);
            var topToPageTop = (0, _scroll.getElementTop)(this.$el);

            var emitScrollEvent = function emitScrollEvent() {
                _this.$emit('scroll', {
                    scrollTop: scrollTop,
                    isFixed: _this.fixed
                });
            }; // The sticky component should be kept inside the container element


            if (container) {
                var bottomToPageTop = topToPageTop + container.offsetHeight;

                if (scrollTop + offsetTop + this.height > bottomToPageTop) {
                    var distanceToBottom = this.height + scrollTop - bottomToPageTop;

                    if (distanceToBottom < this.height) {
                        this.fixed = true;
                        this.transform = -(distanceToBottom + offsetTop);
                    } else {
                        this.fixed = false;
                    }

                    emitScrollEvent();
                    return;
                }
            }

            if (scrollTop + offsetTop > topToPageTop) {
                this.fixed = true;
                this.transform = 0;
            } else {
                this.fixed = false;
            }

            emitScrollEvent();
        }
    },
    render: function render() {
        var h = arguments[0];
        var fixed = this.fixed;
        var style = {
            height: fixed ? this.height + "px" : null
        };
        return h("div", {
            "style": style
        }, [h("div", {
            "class": bem({
                fixed: fixed
            }),
            "style": this.style
        }, [this.slots()])]);
    }
});

exports.default = _default;